<template>
	<view style="padding: 20rpx;">
		<view class="card" style="margin-bottom: 20rpx;" @click="navSearch">
			<u-search placeholder="搜索视频内容" v-model="title" @custom="upData"></u-search>
		</view>

		<view class="flowList">
			<my-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="videoBox(item.id)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<image :showLoading="true" :src="'https://wjlm.goldsu.cn'+item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
						@click="videoBox(item.id)">
						<image :showLoading="true" :src="'https://wjlm.goldsu.cn'+item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}}
						</view>
					</view>
				</template>
			</my-waterfall>
		</view>
		<u-empty marginTop="50" v-if="flowList.length==0" mode="car" text='无搜索结果'
			icon="http://cdn.uviewui.com/uview/empty/search.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowList: [],
				title:''
			}
		},
		methods: {
     upData(){
			 this.$refs.uWaterfall.clear();
			 this.$myRuquest('home/index/new_activity_list',{title:this.title}).then(res=>{
			 		this.flowList=res.data;
			 })
		 },
		 videoBox(id){
		 
		 	uni.navigateTo({
		 		url:'../videoBox/videoBox?id='+id+'&title='+this.title
		 	})
		 },
		}
	}
</script>

<style lang="scss">
	.flowList{
		padding-bottom: 100rpx;
	}
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;

		image {
			width: 100%;
		}
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: #333333;
	}
</style>
